<template>
    <div class="subpage search">
        <my-head title="搜索"></my-head>
        <div class="searchbar">
             <van-search
                v-model="keyword"
                show-action
                placeholder="输入影院名称"
                @search="onSearch"
                @cancel="onCancel"
            />
        </div>
        
        <div class="tui" v-if="toggle">
            <div class="tui-title">
                离你最近
            </div>
            <div class="tui-list">
                <div class="tui-item" @click="gotoWhere({name:'cinema-detail',params:{cinemaId:l.cinemaId} })" v-for="(l,i) in cinemas" :key="i">
                    {{l.name}}
                </div>
            </div>
        </div>
        <div v-else>
            <mlist :list="list" v-if="list.length>0"></mlist>
            <div class="empty" v-else>
                <van-empty 
                image="https://assets.maizuo.com/h5/v5/public/app/img/rectangle@2x.2bdf0374.png"
                description="没有找到匹配的电影院" />
            </div>
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return {
            cinemas:[],  // 推荐的电影院
            list:[],      // 搜索的电影院 
            keyword:'',
            toggle:true,
        }
    },
    methods:{
        onSearch(value){
            console.log(value)
            this.toggle = false;
            this.list = this.allCinemas.filter(item=>(  item.name.indexOf(value)>-1 || item.address.indexOf(value)>-1  ))
        },
        onCancel(){
            this.toggle = true;
            this.keyword = ''
            this.list = []
        },
        async getTuiJiancinemas(){
            let res = await this.$ajax.getMZdata({
                cityId:this.city.cityId
            },{
                'X-Host': 'mall.film-ticket.cinema.recommend'
            })
            this.cinemas = res.data.cinemas
        }
    },
    mounted(){
        if(this.city){
            // 请求推荐电影院
            // 请求所有的电影院
            if(!this.allCinemas.length>0){
                // 如果没有数据才去请求数据 getCinemasAsync
                
            }

            this.getCinemasAsync(this.city.cityId)  // this.allCinemas 
            this.getTuiJiancinemas()
        }else{
            this.$dialog.alert({
                title: '选择城市',
                message: '请选去选择你当前所在的城市',
            }).then(() => {
            // on close
                this.$router.push({
                    name:'city'
                })
            });
        }
    }
}
</script>


<style lang="scss" scoped>
.tui{
    padding:15px;
    border-top:0.5px solid #ededed;
    &-title{
        font-size: 13px;
        line-height: 13px;
        color: #bdc0c5;
        margin: 18px 0;
    }
    .tui-list{
        display: flex;
        flex-wrap: wrap;
        .tui-item{
            height: 30px;
            background-color: hsla(0,0%,95.7%,.6);
            line-height: 14px;
            border-radius: 3px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 13px;
            padding: 8px 12px;
            margin-bottom:15px;
        }
    }
}
</style>